<template>
    <div style="padding: 0 0 0 32px" v-if="list.length">
        <div v-for="(item, outIndex) of list" :key="item.id" style="margin-bottom: 24px">
            <flexbox style="margin-bottom: 8px; margin-left: 8px" v-if="['1', '2'].includes(item.portalProductCatalogDTO.catalogType)">
                <a-tag color="blue">{{ $filters.catalogTypeFilter(item.portalProductCatalogDTO.catalogType) }} </a-tag>
                {{ item.portalProductCatalogDTO.catalogName }}
            </flexbox>
            <custom-table rowKey="id" size="small" :loading="loading" :columns="tableColumns" :data-source="item.portalSystemVersionManageDTOs" :pagination="false">
                <template #catalogName="{ record }">
                    {{ record.portalProductCatalogDTO.catalogName }}
                </template>
                <template #isActivite="{ record }">
                    {{ !!Number(record.isActivite) ? '活动' : '不活动' }}
                </template>
                <template #action="{ record, index }">
                    <a @click="handleToggleActive(record, index, outIndex, '0')" v-if="!!Number(record.isActivite)">停止</a>
                    <a @click="handleToggleActive(record, index, outIndex, '1')" v-else>激活</a>
                </template>
            </custom-table>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { debounce } from '@/utils/util';
import { CustomTable } from '@/components';
import { defineComponent, reactive, toRefs, watch } from 'vue';
import { message } from 'ant-design-vue/es';
export default defineComponent({
    components: {
        CustomTable
    },
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const tableColumns = [
            {
                title: '版本名称',
                dataIndex: 'catalogName',
                slots: { customRender: 'catalogName' }
            },
            {
                title: '版本产研状态',
                width: 300,
                dataIndex: 'isActivite',
                slots: { customRender: 'isActivite' }
            },
            {
                title: '操作',
                width: 200,
                dataIndex: 'action',
                slots: { customRender: 'action' }
            }
        ];
        const state = reactive<any>({
            loading: false,
            list: []
        });
        const handleToggleActive = async (record, index, outIndex, isActivite) => {
            const query = {
                isActivite,
                id: record.id
            };
            const { success, errorMsg } = await api.pbiModel.saveSystemVersionManage(query);
            if (success) {
                message.success('操作成功');
                state.list[outIndex].portalSystemVersionManageDTOs[index].isActivite = isActivite;
            } else {
                message.error(errorMsg);
            }
        };
        const getDetail = async () => {
            state.loading = true;
            const query = {
                id: props.id
            };
            const { success, moule } = await api.pbiModel.getSystemVersionManageSubs(query);
            if (success) {
                if (moule.length) {
                    state.list = moule.map((item) => {
                        if (item.portalProductCatalogDTO.catalogType === '3') {
                            return {
                                ...item,
                                portalSystemVersionManageDTOs: [{ ...item }]
                            };
                        } else {
                            return {
                                ...item
                            };
                        }
                    });
                }
                state.loading = false;
            }
        };
        const getDebounceDetail = debounce(getDetail, 300);
        watch(
            () => props.id,
            (n) => {
                if (n) {
                    getDebounceDetail();
                }
            },
            {
                immediate: true
            }
        );
        return {
            tableColumns,
            ...toRefs(state),
            handleToggleActive
        };
    }
});
</script>

<style scoped>
</style>
